<template>
    <div class="content-box">
      <div ref="searchBox" class="search-box flex" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="100px"
        >
        <el-form-item
          label="上游公司"
          prop="companyIds"
        >
          <el-select
            v-model="queryParams.companyIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in upCompanyOptionList"
              :key="index"
              :label="item.companyName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="上游渠道"
          prop="productIds"
         
        >
          <el-select
            v-model="queryParams.productIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in upChannelOptionList"
              :key="index"
              :label="item.productName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采量模式" prop="pickType">
            <el-select
              v-model="queryParams.pickType"
              clearable
              filterable
              placeholder="请选择"
              style="width: 240px; margin-right: 20px"
            >
              <el-option
                v-for="(item, index) in pickTypeOption"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="计费模式" prop="feeType">
          <el-select
            v-model="queryParams.feeType"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in feeTypeOption"
              :key="index"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item 
         label="管理人" prop="manageUserIds"
         >
          <el-select
            v-model="queryParams.manageUserIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择管理人"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in manageOptionList"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="统计时间" prop="dateRange">
          <el-date-picker
            :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
            clearable
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              plain
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
  
      <div class="table-box">
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="handleQuery"
            :columns="columnsList"
          ></right-toolbar>
        </el-row>
        <el-table
          v-sticky-header
          ref="table"
          v-loading="loading"
          :data="dataList"
        >
          <template v-for="(item,index) in columns">
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="getColumnWidth(index)"
              :fixed="item.fixed"
              :sortable="item.sortable ? item.sortable : false"
              :show-overflow-tooltip="item.showTooltip"
              v-if="item.visible"
              align="center"
            >
            </el-table-column>
          </template>
        </el-table>
        <!-- 使用分页插件 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page-sizes="[10, 50, 100, 200, 500]"
          :page.sync="queryParams.pageIndex"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </template>
  
  <script>
  import tableStickyMixins from "@/mixins/tableStickyMixins";
  import { mapGetters } from "vuex";
  import { getUpCompanyList } from "@/api/business/upCompanyManagement";
  import { queryAllProductList } from "@/api/business/channelManagement";
  import { querySysUserManageList } from "@/api/system/userManage";
  
  import{
    getFeeType,
    getPickType,
  } from "@/api/business/upPickManagement"
  import {
    queryUpPickDayByPage
  } from "@/api/pickCount/upPickCount";
  
  export default {
    // 定义名字用于标识该组件是否被keep-alive缓存
    name: "UpPickCount",
    data() {
      return {
        // 数据列表
        dataList: [],
        // 上游公司筛选项
        upCompanyOptionList: [],
        // 上游渠道筛选项
        upChannelOptionList: [],
        // 计费模式筛选项
        feeTypeOption:[],
        // 采量模式筛选项
        pickTypeOption:[],
        // 管理人筛选项
        manageOptionList: [],

        // 时间范围
        dateRange: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageIndex: 1,
          pageSize: 10,
        },
        loading: false,
        // 表格列信息（用于控制显示与隐藏)
        columnsList:[],
        // 显示搜索栏
        showSearch: true,
        
      };
    },
    mixins: [tableStickyMixins],
    watch: {
      columns: {
        handler() {
          this.updateTableHeight();
        },
        deep: true,
      },
    },
    created() {
      this.getCompanyOptionList();
      this.getChannelList();
      this.getRelatedType();
      this.getManageList();
      this.getList();
    },
    computed: {
      ...mapGetters(["sidebar", "device"]),
      // 计算当前列元素在所处环境的宽度
      getColumnWidth() {
        return (index) => {
          return this.isMobile
            ? this.columns[index].mobileWidth
            : this?.sidebar?.opened
            ? this.columns[index].pcWidth - this.slightWidth
            : this.columns[index].pcWidth + 17;
        };
      },
      // 将数组转换为对象形式
      ArrayFormatObj:()=>{
         return (arr)=>{
           return arr.reduce((pre, cur)=>{
             pre[cur.value] = cur.label;
             return pre;
           },{})
         }
      },
      // 表格列信息计算属性
      columns(){
        const arr = [
         {label: `统计日期`,prop: "billTime",visible: true,pcWidth: 150,mobileWidth: 100,fixed: 'left',showTooltip: true,},
         {label: `渠道名称`,prop: "productName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
         {label: `采量模式`,prop: "pickTypeStr",visible: true,pcWidth: 130,mobileWidth: 130,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
         {label: `计费模式`,prop: "feeTypeStr",visible: true,pcWidth: 100,mobileWidth: 80,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
         {label: `当前单价`,prop: "priceMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed:this.device === 'mobile'? null: 'left',showTooltip: true,sortable:true},

         {label: `撞库数`,prop: "checkDayCount",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `有效撞库`,prop: "checkDayValid",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `撞库成功`,prop: "checkDaySuccess",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `撞库通过率`,prop: "checkOkRatio",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},
         {label: `连登数`,prop: "loginDayCount",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `有效注册`,prop: "loginDayValid",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `注册成功`,prop: "loginDaySuccess",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `注册通过率`,prop: "loginOkRatio",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},

         {label: `API撞库`,prop: "apiDayCount",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `API占比`,prop: "apiDayRatio",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},
         {label: `API撞库成功`,prop: "apiDaySuccess",visible: true,pcWidth: 120,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
         {label: `API成功率`,prop: "apiOkRatio",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},

         {label: `采量数`,prop: "inNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `计费数`,prop: "feeNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `注册数`,prop: "loginNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},

         {label: `跳入数`,prop: "openNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `页面跳转`,prop: "jumpNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `页面加载`,prop: "loadNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `加载比例`,prop: "loadRatio",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},

         {label: `表单数`,prop: "formNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `半流程数`,prop: "halfSellNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `半流程成功数`,prop: "halfSellSucNum",visible: true,pcWidth: 150,mobileWidth: 140,fixed: null,showTooltip: true,sortable:true},
         {label: `全流程数`,prop: "allSellNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `全流程成功数`,prop: "allSellSucNum",visible: true,pcWidth: 150,mobileWidth: 140,fixed: null,showTooltip: true,sortable:true},
         {label: `进件数`,prop: "sellNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `进件成功数`,prop: "sellSucNum",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},
         {label: `注册转化率`,prop: "loginRatio",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},
         {label: `表单转化率`,prop: "formRatio",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},
         {label: `进件转化率`,prop: "sellRatio",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},
         {label: `进件成功转化率`,prop: "sellSucRatio",visible: true,pcWidth: 150,mobileWidth: 140,fixed: null,showTooltip: true,sortable:true},
         {label: `半流程转化率`,prop: "halfSellSucRatio",visible: true,pcWidth: 150,mobileWidth: 140,fixed: null,showTooltip: true,sortable:true},
         {label: `全流程转化率`,prop: "allSellSucRatio",visible: true,pcWidth: 150,mobileWidth: 140,fixed: null,showTooltip: true,sortable:true},

         {label: `授权数`,prop: "authNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `授权比例`,prop: "authRatio",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `回调数`,prop: "notifyNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `回调比例`,prop: "notifyRatio",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `回跳数`,prop: "backNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `回跳比例`,prop: "backRatio",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         
         {label: `贷超跳转数`,prop: "advertInNum",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},
         {label: `贷超点击数`,prop: "advertOutNum",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: true,sortable:true},
         {label: `单人点击次数`,prop: "advertNum",visible: true,pcWidth: 180,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
         {label: `信贷收益`,prop: "sellMoney",visible: true,pcWidth: 110,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `网贷收益`,prop: "advertMoney",visible: true,pcWidth: 110,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `信贷+网贷收益`,prop: "sellAndAdvertMoney",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
         {label: `总成本`,prop: "costMoney",visible: true,pcWidth: 110,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `总利润`,prop: "sysRevenueMoney",visible: true,pcWidth: 110,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
         {label: `ROI`,prop: "roi",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        ]
        this.$set(this,'columnsList',arr)
        return arr;
      }
    },
    methods: {
      // 获取公司筛选项列表
      getCompanyOptionList() {
         // 获取上游公司列表
         getUpCompanyList().then((res) => {
           this.upCompanyOptionList = res.data;
         });
      },
      // 获取渠道筛选项列表
      getChannelList(){
        // 获取上游渠道列表
        queryAllProductList().then((res) => {
          this.upChannelOptionList = res.data;
        });
      },
      // 获取相关模式
      getRelatedType() {
          getFeeType().then((res) => {
            this.feeTypeOption = res?.data;
          });
          getPickType().then((res) => {
            this.pickTypeOption = res?.data;
          });
       },
      // 获取管理人列表
      getManageList() {
         querySysUserManageList().then((res) => {
           this.manageOptionList = res?.data;
         });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, "pageIndex", 1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // 完全重置到初始状态
        this.$set(this, "queryParams", {
          pageIndex: 1,
          pageSize: 10,
        });
        // 重置时间
        this.$set(this, "dateRange", []);
        this.getList();
      },
      /** 查询列表 */
      getList() {
        if (this.dateRange?.length) {
          this.queryParams.timeStart = this.dateRange[0];
          this.queryParams.timeEnd = this.dateRange[1];
        } else {
          delete this.queryParams.timeStart;
          delete this.queryParams.timeEnd;
        }
        this.loading = true;
        queryUpPickDayByPage(this.queryParams).then((response) => {
          this.dataList = response?.data?.list
          this.total = response?.data?.total;
          this.loading = false;
        }).catch((err) => {
          setTimeout(() => {// 延迟2s后自动取消加载状态
            this.loading = false;
          }, 2000);
        })
      },
      // 修改表格高度触发回调
      updateTableHeight() {
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
  }
  .search-box {
    margin: 0 0 20px;
    padding: 20px 20px 0;
    background: #fff;
    align-items: flex-start;
    border-radius: 6px;
  }
  .search-area {
    position: absolute;
    right: 20px;
  }
  .el-form-item__content {
    flex: 1;
    line-height: 40px;
    position: relative;
    font-size: 14px;
    min-width: 0;
  }
  ::v-deep .el-dialog__body {
    border-top: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
  }
  .el-table {
    // 滚动条加粗
    --scrollbar-height: 9px;
  }
  </style>
  